<template>
  <div class="edit-down-modal">
    <el-input class="edit-down-input" readonly v-model="row[column.field]" :title="row[column.field]" @click="popupEvent">
      <template #suffix>
        <el-link class="edit-popup-button" type="primary" :underline="false" @click="popupEvent">
          获取
        </el-link>
      </template>
    </el-input>
    <el-drawer
      v-model="modalVisible"
      direction="rtl"
      size="800"
      :append-to-body="true"
    >
      <template #header>
        <h4>{{ `请选择【 ${row.typeCode} 】的枚举值` }}</h4>
      </template>
      <template #default>
        <div class="drawer-body-lock">
          <div class="drawertable-content">
            <vxe-grid class="drawer-grid" height="auto" highlight-hover-row auto-resize show-overflow ref="enumValueTable" :data="enumDatas" :tree-config="{ expandAll: true }" :radio-config="{ highlight: true, trigger: 'row' }" :columns="enumColumn">
            </vxe-grid>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain @click="modalVisible = false">取 消</el-button>
          <el-button :loading="loading" type="primary" @click="confirmEvent">确 定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { listStructEnum } from "@@/apis/basic-data/index";
import { BasicClassValueField, BasicEnumField } from "@@/apis/basic-data/types";
import { defineProps, ref } from 'vue'
import { VxeGlobalRendererHandles } from "vxe-pc-ui";
import { VxeGridPropTypes, VxeTableDefines } from "vxe-table";
import XEUtils from "xe-utils"

interface Props {
  params: VxeGlobalRendererHandles.RenderTableEditParams
}

const props = defineProps<Props>()
const row = ref<BasicClassValueField>(props.params.row)
const column = ref<VxeTableDefines.ColumnInfo>(props.params.column)
const modalVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const enumColumn = ref<VxeGridPropTypes.Columns>([
  { type: 'radio', width: 60 },
  { field: 'id', visible: false },
  { field: 'value', title: '枚举值' },
  { field: 'code', title: '序列号' },
  { field: 'comment', title: '备注' },
])
const enumDatas = ref<BasicEnumField[]>([])
const enumValueTable = ref();

function load() {
  listStructEnum({
    baseDataId: row.value.typeId
  }).then(({ data }) => {
    enumDatas.value = data;
    let current = XEUtils.findTree(enumDatas.value, item => item.code == row.value.value);
    current && enumValueTable.value && enumValueTable.value.setRadioRow(current.item);
  });
}
function popupEvent() {
  modalVisible.value = true;
  load();
}
function confirmEvent() {
  const selectRecord = enumValueTable.value.getRadioRecord()
  if (selectRecord != null) {
    row.value[column.value.field] = selectRecord['code'];
  }
  modalVisible.value = false;
}

load();
</script>

<style lang="scss" scoped>


.edit-down-modal {
  display: flex;
  align-items: center;
}
</style>
